<template>
  <el-table v-loading="loading" stripe :data="tableData" style="width: 100%">
    <el-table-column label="添加成员时间"  width="200">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{scope.row.addTime}}</span>
      </template>
    </el-table-column>
    <el-table-column label="成员姓名" align="center" width="100">
      <template slot-scope="scope">{{scope.row.name}}</template>
    </el-table-column>
   <el-table-column label="学位" width="80">
     <template slot-scope="scope">{{scope.row.degree}}</template>
   </el-table-column>
   <el-table-column label="研究方向/毕业去向" >
      <template slot-scope="scope">{{scope.row.interests}}</template>
    </el-table-column>
    <el-table-column label="入学时间" align="center" width="100">
      <template slot-scope="scope">{{scope.row.since}}</template>
    </el-table-column>
    <el-table-column label="毕业时间" align="center" width="100">
      <template slot-scope="scope">
        <div>
          <span v-if="scope.row.graduated"> {{scope.row.until}}</span>
          <span v-else class="el-icon-error" style="color: #5555ff"></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="编辑" width="50" align="center">
      <template slot-scope="scope">
        <el-button type="text" slot="reference" @click="editMember(scope.$index, scope.row)">
          <i class="el-icon-edit" />
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="删除" width="50" align="center">
      <template slot-scope="scope">
        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" title="确定删除吗？"
          @confirm="deleteMember(scope.$index, scope.row.id)">
          <el-button type="text" slot="reference">
            <i class="el-icon-delete" style="color: #ff8c8c"/>
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      tableData: null
    }
  },
  created () {
    this.$http.get('member/list').then(res => {
      this.tableData = res.data
      this.loading = false
      this.$store.commit('setMemberListBlur', false)
    })
  },
  computed: {
    activeTab () {
      return this.$store.state.activeTab
    }
  },
  watch: {
    activeTab: function (val, oldval) {
      if (val === 'viewMember' && this.$store.state.memberListBlur) {
        this.loading = true
        this.$http.get('member/list').then(res => {
          this.tableData = res.data
          this.loading = false
          this.$store.commit('setMemberListBlur', false)
        })
      }
    }
  },
  methods: {
    editMember (index, row) {
      this.$store.commit('setActiveMember', JSON.parse(JSON.stringify(row)))
      this.$store.commit('setActiveTab', 'updateMember')
    },
    deleteMember (index, id) {
      var token = window.sessionStorage.getItem('token')
      var param = {}
      param.token = token
      param.id = id
      this.$http.post('/member/delete', param).then(res => {
        res = res.data
        if (!res.success) {
          this.$message.error(res.info)
        } else {
          this.$message.success(res.info)
          this.$store.commit('setMemberListBlur', true)
          this.loading = true
          this.$http.get('member/list').then(res => {
            this.tableData = res.data
            this.loading = false
            this.$store.commit('setMemberListBlur', false)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
